<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.min.css">
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<link rel="stylesheet" href="/resource/css/jqueryvalidate/screen.css">
</head>
<body>
	<div class="container">
		<div>
			<!-- 图片 -->
			<a href="/"> <img alt="" src="/resource/pic/logo-admin.jpg" height="50" width="100" ></a> 
			<hr>
		</div>
		<div class="row">
			<div class="col-md-6">
					
					<!-- 展示错误信息 -->
					<span style="color:red" id="errorMsg" ></span>
					
				<form action="" method="post" id="loginForm">
				
					<div class="form-group">
						<label for="username">用户名：</label> <input type="text"
							class="form-control" id="username" name="username">
					</div>
					<div class="form-group">
						<label for="password">密码：</label> <input type="password"
							class="form-control" id="password" name="password">
					</div>
					
					<div class="form-group">
						<button type="reset" class="btn btn-primary">重置</button>
						<button type="submit" class="btn btn-primary">登录</button>
					</div>
				</form>
			</div>
			<!-- 加上图片 -->
			<div class="col-md-6">
				<img alt="" src="/resource/pic/bg-reg.jpg" height="300">
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(function(){
		$("#loginForm").validate({
			rules:{
				username:{
					required:true
				},
				password:{
					required:true
				}
				
			},
			messages:{
				username:{
					required:"请输入用户名"
				},
				password:{
					required:"请输入密码"
				}
			},
			submitHandler:function(form){
				
				
				//使用ajax提交登录信息
				$.post(
					"/user/login",
					$("#loginForm").serialize(),
					function(result){
						//获取返回信息，如果为真，则跳转到首页
						if(result){
							location="/";
						}else{
							//如果为假，则展示信息
							$("#errorMsg").html("用户名或密码不正确");
						}
					}
				)
			}
		})
	})


</script>
</html>